<template>
  <a-descriptions
    :label-style="{
      textAlign: 'right',
      width: '156px',
      paddingRight: '10px',
      color: 'rgb(var(--gray-8))',
    }"
    :value-style="{ width: '400px' }"
  >
    <template #title>
      <span class="descriptions-title">{{ title }}</span>
    </template>
    <a-descriptions-item :label="item.label" :span="item.span" v-for="(item, index) in data" :key="index">
      <template v-if="item.slotName">
        <slot :name="item.slotName" :data="item"></slot>
      </template>
      <template v-else-if="item.render">
        {{ item.render() }}
      </template>
      <template v-else>
        {{ item.value }}
      </template>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script setup lang="ts">
  interface IProps {
    title: string
    data: any[]
  }
  defineProps<IProps>()
</script>
<style lang="less" scoped>
  .descriptions-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
  }
</style>
